<template>
  <div id="order-bar">
    <c-title text="提交订单"></c-title>
    <div class="addr" @click="showAddress = true;" v-if="info">
      <!-- <i class="fa fa-map-marker"></i> -->
      <img class="icon-local-img" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" alt="">
      <p v-show="location_detail.username" class="icon-sty">
        收件人:{{ location_detail.username }} {{ location_detail.mobile }}
        <br />
        <span style="color: #999;">{{ location_detail.province }}{{ location_detail.city }}{{ location_detail.district }}{{ location_detail.street }}{{ location_detail.address }}</span>
      </p>
      <p v-show="!location_detail.username" class="icon-sty">请点击选择地址</p>
      <i v-show="location_detail.username" class="fa fa-angle-right"></i>
    </div>
    <div class="detail-box">
      <img :src="dataDetail.pic_url" alt="">
      <div class="right-box">
        <div class="top-name">
          <div class="skill-title">{{dataDetail.title}}</div>
          <div class="skill-name">{{dataDetail.has_one_category ? dataDetail.has_one_category.title : ''	}} {{dataDetail.desc}}</div>
        </div>
        <div class="price-bar">
          <span class="price-name">{{dataDetail.fee}}</span>
          <span class="price-sty">元/次</span>
        </div>
      </div>
    </div>
    <div class="anytime-pane">
      <div class="appointment-time">
        <span class="time-sty">预约时间<span class="star-sty">*</span></span>
        <div class="right-op-time" @click="clickAppointment">
          <span class="true-time" v-if="time_op !== ''">{{time_day.split('-')[1]}}月{{time_day.split('-')[2]}}日({{time_op}})</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="demand-profile">
        <span class="time-sty">需求简介<span class="star-sty">*</span></span>
        <van-field v-model="content" placeholder="请输入需求简介" style="width: 80%;" />
      </div>
    </div>
    <div :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle bottom-pane' : 'bottom-pane']">
      <div class="text">
        <span class="name">合计:</span>
        <span class="price-name">￥{{dataDetail.fee}}</span>
      </div>
      <div class="appointment-pane">
        <span class="appointment-name" @click="submit">预约</span>
      </div>
    </div>
    <van-popup v-model="popup_show" position="bottom" :style="{ height: '100%' }" @click-overlay="cancalTime">
      <div class="time-pane">
        <div class="top-pane">
          <span class="cancal" @click="cancalTime">取消</span>
          <span class="time-prop">预约时间</span>
          <span class="sure" @click="popup_show = false">确认</span>
        </div>
        <div>
          <c-calendar v-if="popup_show" ref="calendar" :events="calendarEvents" @select="selectedDay" @monthChanged="monthChanged"> </c-calendar>
        </div>
        <div class="choose-time">
          <div class="tips" v-if="timeList.length <= 0">暂无可预约时间</div>
          <van-collapse v-model="activeNames" v-if="timeList.length > 0">
            <van-collapse-item title="选择时间" :name="1" :value="time_op">
              <div class="specific-time">
                <!-- none-act -->
                <span :class="item.state !== 0 ? 'specific-time-rol none-act' : time_op == item.time_str ? 'specific-time-rol active-color' : 'specific-time-rol'" @click="chooseTime(item)" v-for="(item,index) in timeList" :key="index">{{item.time_str}}</span>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </div>
    </van-popup>

    <yz-address-list v-model="showAddress" v-on:confirm="confirmSelectAddress"></yz-address-list>
  </div>
</template>
<script>
import order_controller from "./order_controller.js";

export default order_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pcStyle {
  width: 375px !important;
}

.addr {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items: center;
  background: #fff;
  padding: 0.875rem;

  .icon-local-img {
    width: 0.85rem;
    height: 0.85rem;
    color: #999;
  }

  .icon-sty {
    flex: 1;
    text-align: left;
    padding: 0 0.625rem;
  }

  .fa-angle-right {
    line-height: 1.5rem;
    font-size: 0.7rem;
    color: #999;
  }
}

.detail-box {
  background: white;
  padding: 0.6rem;
  display: flex;
  margin-top: 0.4rem;

  img {
    width: 5.45rem;
    height: 5.45rem;
    border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
    margin: 0;
  }

  .right-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 0.3rem;
    padding: 0.325rem 0;

    .top-name {
      text-align: left;

      .skill-title {
        font-size: 0.9rem;
        font-weight: 400;
        color: #333;
      }

      .skill-name {
        font-size: 0.8rem;
        font-weight: 400;
        color: #999;
        margin-top: 0.8rem;
      }
    }

    .price-bar {
      display: flex;
      color: #ff9c43;
      align-items: center;

      .price-name {
        font-size: 0.85rem;
        font-weight: 500;
        color: #ff9c43;
      }

      .price-sty {
        font-size: 0.7rem;
        font-weight: 400;
        color: #ff9c43;
      }
    }
  }
}

.anytime-pane {
  padding: 0.6rem 0.6rem 0 0.6rem;
  background: white;
  margin: 0.6rem 0;

  .appointment-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.675rem;
    border-bottom: 0.025rem solid #e7e7e7;

    .time-sty {
      font-size: 0.8rem;
      font-weight: 400;
      color: #333;

      .star-sty {
        color: #f84949;
      }
    }

    .right-op-time {
      // margin-top: 0.6rem;
      display: flex;
      align-items: center;

      .true-time {
        font-size: 0.8rem;
        font-weight: 400;
        color: #4978f8;
        margin-right: 0.45rem;
        line-height: 1;
      }
    }
  }

  .line {
  }

  .demand-profile {
    display: flex;
    align-items: center;

    .time-sty {
      font-size: 0.8rem;
      font-weight: 400;
      color: #333;

      .star-sty {
        color: #f84949;
      }
    }
  }
}

.time-pane {
  .top-pane {
    margin: 1.05rem 0.8rem 0.8rem 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cancal {
      font-size: 0.7rem;
      font-weight: 400;
      color: #999;
    }

    .time-prop {
      font-size: 0.75rem;
      font-weight: bold;
      color: #333;
    }

    .sure {
      font-size: 0.7rem;
      font-weight: 400;
      color: #999;
    }
  }

  .choose-time {
    padding: 0 0.6rem;
    margin-bottom: 0.6rem;

    .tips {
      color: #000;
      padding: 1rem;
      text-align: left;
      font-weight: 700;
    }

    .choose-time-name {
      padding: 0.65rem 0;
      display: flex;
      justify-content: space-between;
      border-top: 0.025rem solid #e7e7e7;

      .time-sty {
        font-size: 0.85rem;
        font-weight: 400;
        color: #333;
      }

      .time-sty-op {
        font-size: 0.8rem;
        font-weight: 400;
        color: #999;
      }
    }

    .specific-time::after {
      content:  '';
        width: 25%;
        height:  0;
        visibility:  hidden;
    }

    .specific-time {
      margin-bottom: 0.6rem;
      display: grid;
      justify-content: space-between;
      grid-template-columns: 1fr 1fr 1fr 1fr;

      .specific-time-rol {
        display: flex;
        margin: 0 0.6rem 0.6rem 0;
        padding: 0.5rem 1.2rem;
        background: #fffaf1;
        border-radius: 0.85rem 0.85rem 0.85rem 0.85rem;
        font-size: 0.7rem;
        font-weight: 400;
        color: #333;
        width: fit-content;
      }

      .active-color {
        background: rgb(244, 159, 25);
        color: white;
      }
    }
  }
}

.bottom-pane {
  background: white;
  padding: 0.4rem 0.6rem;
  position: fixed;
  width: 100%;
  bottom: 0;

  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 2.2rem;

    .name {
      font-size: 0.7rem;
      font-weight: 400;
      color: #999;
    }

    .price-name {
      font-size: 0.8rem;
      font-weight: 500;
      color: #ff9c43;
      margin-left: 0.425rem;
    }
  }

  .appointment-pane {
    position: relative;

    .appointment-name {
      background: #4978f8;
      color: white;
      padding: 0.375rem 2.2rem;
      border-radius: 1.025rem 1.025rem 1.025rem 1.025rem;
      position: absolute;
      right: 0.6rem;
      top: -1.85rem;
    }
  }
}

::v-deep .van-cell__title {
  text-align: left;
}

.none-act {
  background-color: hsla(0, 0%, 60%, 0.6) !important;
  color: #fff !important;
}
</style>
